<template>
    <router-link to="/register"> <el-button class="add" type="primary" text> 添加管理员 </el-button></router-link>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="adminid" label="id" width="350" />
        <el-table-column prop="adminname" label="用户名" width="300" />
        <el-table-column prop="role" label="权限等级" width="300" />
        <el-table-column fixed="right" label="操作" width="320">
            <template #default="scope">
                <el-button @click="edit(scope.row)" link type="primary" size="small"> 查看详细信息 </el-button>
                <el-button @click="modf(scope.row)" link type="primary" size="small">修改权限为2级</el-button>
                <el-button @click="del(scope.row)" link type="danger" size="small">删除管理员</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="管理员详细信息" width="500">
        <div>
            <table class="tab" border="1">
                <tr>
                    <td>用户名</td>
                    <td>权限等级</td>
                </tr>
                <tr>
                    <td>
                        {{ name }}
                    </td>
                    <td>{{ role }}</td>
                </tr>
            </table>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false"> 关闭 </el-button>
            </div>
        </template>
    </el-dialog>
    <div class="page">
        <el-button type="primary" icon="el-icon-d-arrow-left" @click="shouPage">首页</el-button>
        <el-button type="primary" icon="el-icon-arrow-left" @click="prePage">上一页</el-button>
        <span :style="{ cursor: 'pointer', margin: '20px', fontSize: '20px', color: 'black' }">{{ currentPage + 1 }}</span>
        <el-button type="primary" icon="el-icon-arrow-right" @click="nextPage">下一页</el-button>
        <el-button type="primary" icon="el-icon-d-arrow-right" @click="weiPage">尾页</el-button>
    </div>
</template>
<script>
import { adminlist } from "../api/api/adminlist.js";
import { modify } from "../api/api/modify.js";
import { dele } from "../api/api/dele.js";

export default {
    data() {
        return {
            tableData: [],
            dialogFormVisible: false,
            name: "",
            role: "",
            totalPage: [], // 所有分页的数据
            pageSize: 8, // 每页显示数量
            pageNum: 1, // 共几页=所有数据/每页现实数量
            dataShow: [], // 当前显示的数据
            currentPage: 0, // 默认当前显示第一页
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            let that = this;
            adminlist().then((res) => {
                //console.log("res", res.data.data);
                // this.tableData = res.data.data;
                that.pageNum = Math.ceil(res.data.data.length / that.pageSize) || 1;
                for (let i = 0; i < that.pageNum; i++) {
                    that.totalPage[i] = res.data.data.slice(that.pageSize * i, that.pageSize * (i + 1));
                    that.tableData = that.totalPage[that.currentPage];
                }
            });
        },
        edit(row) {
            //console.log("row", row);
            this.dialogFormVisible = true;
            this.name = row.adminname;
            this.role = row.role;
        },
        modf(row) {
            let obj = {
                adminname: row.adminname,
                password: "456123",
                role: "2",
                checkedKeys: "李诗雅",
            };
            modify(obj).then((res) => {
                //console.log("res", res);
                this.getData();
            });
        },
        del(row) {
            let obj = {
                adminid: row.adminid,
            };
            dele(obj).then((res) => {
                //console.log("res", res);
                this.getData();
            });
        },
        nextPage() {
            let that = this;
            if (that.currentPage === that.pageNum - 1) return;
            that.tableData = that.totalPage[++that.currentPage];
        },
        shouPage() {
            let that = this;

            that.currentPage = 0;
            that.tableData = that.totalPage[that.currentPage];
        },
        weiPage() {
            let that = this;
            that.currentPage = that.pageNum - 1;
            that.tableData = that.totalPage[that.currentPage];
        },
        // 上一页
        prePage() {
            let that = this;
            if (that.currentPage === 0) return;
            that.tableData = that.totalPage[--that.currentPage];
        },
    },
};
</script>
<style lang="css" scoped>
.add {
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
}
.tab {
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-align: center;
}
.tab td {
    height: 50px;
}
.page {
    margin: 20px auto;
    text-align: center;
    margin-bottom: 100px;
    margin-top: 100px;
    /* height: 100px; */
}
</style>
